<template lang="html">
    <div :class="'room '+roomStatus">
        <div class="roomNo" v-text="room.roomNo">301</div>
        <slot name="no"></slot>
        <div v-text="room.roomStatus">入住</div>
        <div class="roomType" v-text="room.roomType">单间</div>
        <button @click="checkin">入住</button>
        <button @click="checkout">退房</button>
    </div>
</template>
<script>
export default {
    props:{
        room:{
            type:Object,
        }
    },
    computed:{
        roomStatus(){
            if(this.room.roomStatus === "入住"){
                return "roomFull";
            }else{
                return "roomEmpty";
            }
        }
    },
    methods: {
        checkout(){
            this.room.roomStatus="未入住"
            this.$emit('checkout',this.room);
        },
        checkin(){
            this.room.roomStatus="入住"
            this.$emit('checkin',this.room);
        }
    },
}
</script>
<style lang="css">
    .room{
        border: 1px solid red;
        border-radius: 5px;
        width: 100px;
        height: 100px;
    }
    .roomFull{
        background-color: red;
    }
    .roomEmpty{
        background-color: #fff;
    }
</style>